<template>
  <Dialog title="领取限制"
             width="800px"
             append-to-body
             v-model:model-value="isShowDialog"
             @opened="handleOpened"
             @closed="handleClosed">
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="领取限制：" prop="limit">
        <div class="item-block">
          每人
        </div>
        <div class="item-block">
          <el-select v-model="form.timeType">
            <el-option v-for="item in unitOptions" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="item-block">
          领取
        </div>
        <div class="item-block">
          <el-input v-model="form.limitNum">
            <template #append>次</template>
          </el-input>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import {IRankBenefitItem, IRankItem} from "@/api/modules/vipCenter";
import {WritableComputedRef} from "vue";
import {addRankBenefits} from "@/api/vipCenter";
import {positiveInteger} from "@/utils/commonRegexp";
import {frequency} from "@/views/vipCenter/dict/frequency";

const props = defineProps<{
  show: boolean,
  rowData: IRankBenefitItem,
  rankData: IRankItem
}>()
const emits = defineEmits(['update:show', 'confirm'])
const isShowDialog: WritableComputedRef<boolean> = computed<boolean>({
  set(newValue) {
    emits('update:show', newValue)
  },
  get() {
    return props.show
  }
})
const formRef = ref()
const form = reactive<{
  timeType: string,
  limitNum: string | null
}>({
  timeType: 'all',
  limitNum: null
})

const rules = reactive({
  limit: [{
    trigger: 'blur',
    validator(rule:any, value: any, callback:any) {
      if (isEmpty(form.limitNum)) {
        callback('请填写限制次数')
      } else if (!positiveInteger.test('' + form.limitNum)) {
        callback('限制次数只能为正整数')
      } else {
        callback()
      }
    }
  }]
})

const unitOptions = ref(frequency)

const isEmpty = (val: any) => {
  return val === null || val === undefined || val === ''
}

const handleOpened = () => {
  if (!isEmpty(props.rowData.limitNum)) {
    form.limitNum = props.rowData.limitNum
  }

  if (!isEmpty(props.rowData.timeType)) {
    form.timeType = props.rowData.timeType
  }
}

const handleClosed = () => {
  // formRef.value?.resetFields()
  form.timeType = 'all'
  form.limitNum = ''
  formRef.value?.resetFields()
}

const handleConfirm = async () => {
  formRef.value?.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      const memberEquityEntities = [{
        id: props.rowData.id,
        ...form
      }]
      const rs = await addRankBenefits({
        memberEquityEntities
      })
      if (rs.code === 200) {
        ElMessage.success('保存成功')
        isShowDialog.value = false
        emits('confirm')
      }
    }
  })
}

const handleCancel = () => {
  isShowDialog.value = false
}
</script>

<style scoped lang="scss">
.item-block {
  :deep(.el-select) {
    width: 100px;
  }

  :deep(.el-input__wrapper) {
    width: 100px;
  }
}

.item-block:not(:first-child) {
  margin-left: 10px;
}
</style>
